<%--

Copyright 2010 mazhao.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
under the License.

    Document   : group
    Created on : Sep 26, 2010, 3:27:32 PM
    Author     : mazhao
--%>

<%@page contentType="text/html" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Group Maintenance Page</title>
    <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery-ui-timepicker-addon.js"></script>
    <style type="text/css">
        .ui-timepicker-div .ui-widget-header {
            margin-bottom: 8px;
        }

        .ui-timepicker-div dl {
            text-align: left;
        }

        .ui-timepicker-div dl dt {
            height: 25px;
        }

        .ui-timepicker-div dl dd {
            margin: -25px 0 10px 65px;
        }

        .ui-timepicker-div td {
            font-size: 90%;
        }
    </style>
    <script type="text/javascript">

        DEBUG = true;

        $(document).ready(function() {

            $("table#productTable tbody tr").mousedown(function() {
                productListClick($(this));
            });

            // initialization of date time picker
            $("#begin").datetimepicker({dateFormat: 'yy/mm/dd', timeFormat:'hh:mm'});
            $("#end"  ).datetimepicker({dateFormat: 'yy/mm/dd', timeFormat:'hh:mm'});
            //            $("#begin").datetimepicker({dateFormat: 'yyyy/mm/dd hh:MM TT'});
            //            $("#end"  ).datetimepicker({dateFormat: 'yyyy/mm/dd hh:MM TT'});

            //
            $("#groupCreateFormSubmit").click(function() {
                groupCreate();
            });

        });

        function productListClick(row) {
            // set background
            $("table#productTable tbody tr.selected").removeClass("selected");
            row.addClass("selected");

            // set catalog id and product id
            var cid = row.children(":nth-child(2)").text();
            var pid = row.children(":nth-child(1)").text();
            $("#productId").val(pid);
            $("#catalogId").val(cid);

            loadGroup(pid);
        }

        function groupCreate() {
            $.post("<%= request.getContextPath() %>/management/onthefly/groupcreate.action",
            {"productId": $("#productId").val(), "catalogId": $("#catalogId").val(),
                "min": $("#min").val(), "max": $("#max").val(),"price": $("#price").val(),
                "timeBegin": $("#begin").val() , "timeEnd": $("#end").val() },
                    afterGroupCreate,
                    "json");
        }

        function afterGroupCreate(data) {
            $.log("after group create begin");
        }

        function loadGroup(productId) {
            $.log("load group begin ");
            $.post("<%=request.getContextPath()%>/management/onthefly/grouplist.action",
                    {"productId": productId},
                    loadGroupImpl,
                    "json"
                    )

        }
        function loadGroupImpl(data) {
            $.log("group counts " + data.groups.length);
            $("table#groupListTable tbody tr").each(function() {
                $(this).remove();
            });
            $.log("after remove all the groups");
            for(var i = 0; i < data.groups.length; i++)  {
                var curgrp = data.groups[i];
                var tmpHtml = "<tr><td>" + curgrp.catalogId + "</td><td>" +
                        curgrp.min  + "</td><td>" +
                        curgrp.max + "</td><td>" +
                        curgrp.price + "</td><td>" +
                        curgrp.timeBegin + "</td><td>" +
                        curgrp.timeEnd + "</td><td>" +
                        curgrp.status + "</td></tr>" ;
                 $("table#groupListTable tbody").append(tmpHtml);
            }
            $.log("after add all the new groups");
        }

    </script>
</head>
<body>
<div id="catalogChooseDiv">
    <span class="alt"> Please choose catalog </span><br/>
    <s:iterator value="catalogPath" var="cat">
        <s:url id="enterCatalogUrl" action="grouplist" namespace="/management">
            <s:param name="currentCatalogId" value="%{id}"/>
        </s:url>
        → <s:a href="%{enterCatalogUrl}" cssClass="alt"><s:property value="name"/></s:a>
    </s:iterator>
    <br/>
    <s:iterator value="subCatalog" var="cat">
        <s:url id="enterCatalogUrl" action="grouplist" namespace="/management">
            <s:param name="currentCatalogId" value="%{id}"/>
        </s:url>
        <s:a href="%{enterCatalogUrl}" cssClass="alt"><s:property value="name"/></s:a> &nbsp;&nbsp;&nbsp;&nbsp;
    </s:iterator>
</div>
<div id="productListDiv" align="left" class="span-20 last alt">
    <span>Then product list show here, click product list item here!</span><br/>
    <table id="productTable" class="alt" align="left" style="margin-left:0px;">
        <thead>
        <tr>
            <td>ID</td>
            <td>Catalog</td>
            <td>Name</td>
            <td>Description</td>
            <td>Original Price</td>
            <td>Member Price</td>
            <td>Special Price</td>
            <td>Discount</td>
            <td>Point</td>
            <td>Star</td>
        </tr>
        </thead>
        <tbody>
        <s:iterator value="productList" var="product">
            <tr>
                <td><s:property value="id"/></td>
                <td><s:property value="catalogId"/></td>
                <td><s:property value="name"/></td>
                <td><s:property value="description"/></td>
                <td><s:property value="originalPrice"/></td>
                <td><s:property value="memberPrice"/></td>
                <td><s:property value="specialPrice"/></td>
                <td><s:property value="discount"/></td>
                <td><s:property value="point"/></td>
                <td><s:property value="star"/></td>
            </tr>
        </s:iterator>
        </tbody>
    </table>
</div>

<div id="groupList"  align="left" class="span-20 last alt">
    The following are the group purchases of the selected product.<br/>
    <table id="groupListTable" align="left" style="margin-left:0px;">
        <thead>
            <tr>
                <td>Catalog</td>
                <td>Min</td>
                <td>Max</td>
                <td>Price</td>
                <td>Begin</td>
                <td>End</td>
                <td>Status</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Catalog</td>
                <td>Min</td>
                <td>Max</td>
                <td>Price</td>
                <td>Begin</td>
                <td>End</td>
                <td>Status</td>
            </tr>
        </tbody>
    </table>
</div>

<div id="groupCreate" align="left" class="span-20 last alt">
    <s:form id="groupCreateForm" action="" namespace="" cssClass="alt" cssStyle="margin-left:0px;" onsubmit="return false;">
        <s:textfield id="productId" name="productId" label="Product Id" readonly="true"/>
        <s:textfield id="catalogId" name="catalogId" label="Catalog Id" readonly="true"/>
        <s:textfield id="min" name="min" label="Min Count"/>
        <s:textfield id="max" name="max" label="Max Count"/>
        <s:textfield id="price" name="price" label="Price"/>
        <s:textfield id="begin" name="begin" label="Begin Date Time"/>
        <s:textfield id="end" name="end" label="End Date Time"/>
        <tr align="right">
            <td colspan="2" align="right" style="border:solid 1px black">
                <button id="groupCreateFormSubmit">Submit</button>
            </td>
        </tr>
    </s:form>
</div>
</body>
</html>